<template>
  <div class="container">
    <h1>日历行程表</h1>
    <el-table class="drag-table" :key="tableke" :data="schedule2" border :cell-class-name="getCellClassName">
			<el-table-column label="团队名称" align="center" prop="arriveSite" />
      <!-- <el-table-column v-for="item in x" :key="item.value" :prop="item.value" :label="item.label"></el-table-column> -->
	  <el-table-column v-for="(item,index) in date" :key="item"  :label="item">
		  <template v-slot="scope">
		    <span>{{scope.row.arrX[index]}}</span>
		  </template>
	  </el-table-column>
	
    </el-table>
		<table>
		    <tr >
		      <td >
		        1
		      </td>
			  <td >
			    1
			  </td>
		    </tr>
		  </table>
		 <h1>日历行程表</h1>{{numbers}}
		  <table>
		      <tr v-for="(item, index) in numbers" :key="index" @mousedown="startDrag($event, index)">
		        <td :style="{ width: itemWidth + 'px' }" draggable="true" @dragstart="dragStart($event)" @dragover.prevent @drop="drop($event, index)">
		          {{ item }}
		        </td>
		      </tr>
		    </table>
		
  </div>
</template>

<script>

import Sortable, { MultiDrag, Swap } from "sortablejs";
Sortable.mount(new MultiDrag(), new Swap());

export default {
  data() {
    return {
			numbers: [1, 2, 3, 4, 5],
			    itemWidth: 50, // 单元格宽度，可以根据需要调整
			    dragSrcIndex: null, // 拖拽源元素的索引
			    dragging: false, // 是否正在拖拽的标志
      // x轴的数据，定义表头使用和定位使用
      x: [
        { value: "time", label: "" },
        { value: "mon", label: "25号" },
        { value: "tue", label: "26号" },
        { value: "wed", label: "27号" },
        { value: "thu", label: "28号" },
        { value: "fri", label: "29号" },
        { value: "sat", label: "30号" },
        { value: "sun", label: "31号" },
		{ value: "sun", label: "31号" },
		 
      ],
	  tableke:0,
	  date:[
		  "25号","26号" ,"27号" ,"28号" ,"29号" ,"30号" ,"31号" ,"8月1号","2号","3号","4号","5号"    ],
      // 要渲染的表格数据
      schedule: [
        {arriveSite:"2025-07-26",xing:["落地日","阳朔日","龙脊日","上单日","","","","","","","",""]},
        {arriveSite:"2025-07-27",xing:["","","落地日1","阳朔日1","龙脊日1","上单日1"]},
        {arriveSite:"2025-07-30",xing:["","","","","","落地日2","阳朔日2","阳朔日2","阳朔日2","阳朔日2"] }
      ],
	  schedule2: [
	    {arriveSite:"2025-07-25",xing:["落地日","阳朔日","龙脊日","上单日"]},
	    {arriveSite:"2025-07-27",xing:["落地日1","阳朔日1","龙脊日1","上单日1"]},
	    {arriveSite:"2025-08-04",xing:["落地日2","阳朔日2","阳朔日2","阳朔日2","阳朔日2"] }
	  ],
	  from:[
		  {  value:""},
		  {  value:""},
	  ],
	  value1:"落地日",
	  value2:"古东日",
	  value3:"阳朔游",
	  value4:"龙脊日",
	  value5:"上单日"
    };
  },
  mounted() {
    this.initDrag();
	//his.from.value+"1"="11111"
	
	this.sec(2,"上单日,龙脊日")
	this.tex(this.schedule2)
  },
  methods: {
		startDrag(event, index) {
		      this.dragSrcIndex = index;
		      this.dragging = true;
		    },
		    dragStart(event) {
		      event.dataTransfer.setData("text", event.target.innerText);
		      event.dataTransfer.effectAllowed = 'move';
		    },
		    drop(event, dropIndex) {
		      if (this.dragSrcIndex !== dropIndex) {
		        const movedItem = this.numbers.splice(this.dragSrcIndex, 1)[0];
		        this.numbers.splice(dropIndex, 0, movedItem);
		        this.dragSrcIndex = null; // 重置拖拽源索引
		      }
		      this.dragging = false; // 停止拖拽状态
		    },
	  tex(list){
		  // schedule: [
		  //   {arriveSite:"2025-7-25",xing:["落地日","阳朔日","龙脊日","上单日"]},
		  //   {arriveSite:"2025-7-27",xing:["落地日1","阳朔日1","龙脊日1","上单日1"]},
		  //   {arriveSite:"2025-7-30",xing:["落地日2","阳朔日2","阳朔日2","阳朔日2","阳朔日2"] }
		  // ],
		  //查询开始时间2025-7-25 查询12天 
		  //生成数组
		 //  let arr=new Array(12).fill("")
		 // console.log("空数组",arr)
		 //  let dateT=this.calculateDays("2025-07-25","2025-07-27")
		 // // console.log("相差天数",dateT)
		 //  let shu="2,2,5,2"
		 //  arr[dateT-1]="落地日"
		 //console.log("新数组",arr)  
		  let this_=this
		  list.forEach((item,index) => {
			  //生成数组长度30
			  item.arrX=new Array(12).fill("")
			  //计算相差日期
			  let dateT=this_.calculateDays("2025-07-25",item.arriveSite)
			  console.log("计算相差日期2：",dateT)
			  //循环游日
			  for (let i = 0; i < item.xing.length; i++) {
			     item.arrX[Number(dateT+i)]=item.xing[i]
				  // console.log("新数组"+item.arriveSite, item.xing[i])
				  // console.log("新数组2："+ dateT,i)
			  }
			
		  })
		  
		  this.schedule2=list
		 console.log("新数组", this.schedule2)
	  },
	  //计算天差
	  calculateDays(date11,date22){
		   const date1 = new Date(date11);
		    const date2 = new Date(date22);
		    const diffTime = Math.abs(date2 - date1);
		    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
		      
		 
		   
	  },
	sec(time,s){
		this.from[1].value=s
		console.log("2",this.from)
		/* switch(time){
			case "1":
				
				console.log(this.from)
			break;	
			case "2":
				this.from.value2=value
				console.log(this.from)
			break;	
			case "3":
				this.from.value3=value
				console.log(this.from)
			break;	
		} */
	} ,
    getCellClassName({ row, column }) {
      //   console.log(row, column, rowIndex, columnIndex);
      // 添加filtered属性
      if (!row[column.property]) {
        return "filtered";
      }
      return "";
    },
    initDrag() {
      // 找出每一行（tr）
      const children = document.querySelector(
        `.drag-table .el-table__body-wrapper tbody`
      ).children;

      // 给每一行添加列表拖拽，实现单元格拖拽
      for (let index = 0; index < children.length; index++) {
        const el = children.item(index);
        Sortable.create(el, {
          group: {
            name: "shared", // 定义为可列表间拖拽
          },
          swap: true, // 交换属性
          filter: ".filtered", // 过滤不能拖拽
          onEnd: evt => {
             console.log("onEnd", evt);
            // 更新数据，这里暂时直接通过交换数据来拖拽，实际情况是会通过接口更新再拉取列表实现
            this.updateData({
              oldRowIndex: evt.from.rowIndex,
              newRowIndex: evt.to.rowIndex,
              oldColumnIndex: evt.oldIndex,
              newColumnIndex: evt.newIndex
            });
          }
        });
      }
    },
    updateData({ oldRowIndex, newRowIndex, oldColumnIndex, newColumnIndex }) {
      // console.log(oldRowIndex, newRowIndex, oldColumnIndex, newColumnIndex);

      // 交换数据
      const schedule = JSON.parse(JSON.stringify(this.schedule));
      const OldProperty = this.x[oldColumnIndex].value;
      const oldValue = schedule[oldRowIndex][OldProperty];
      const newProperty = this.x[newColumnIndex].value;
      const newValue = schedule[newRowIndex][newProperty];
      schedule[newRowIndex][newProperty] = oldValue;
      schedule[oldRowIndex][OldProperty] = newValue;

      // 强制刷新
      this.schedule = [];
      this.$nextTick(() => {
        this.schedule = schedule;
        this.$nextTick(() => {
          this.initDrag();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;
  background: #f1eded;
  height: 500px;
  padding-top: 30px;
}
td {
  border: 1px solid #ccc;
  text-align: center;
  cursor: move; /* 显示可拖动的光标 */
  user-select: none; /* 防止文本被选中 */
}
tr{
	float: left;
}
</style>

